<template>
    <view class="content">
        <uni-nav-bar title="确认订单" color="#fff" backgroundColor="transparent" :border="false" :statusBar="true" :fixed="true" @clickLeft="$c.back()">
            <view class="uni-nav-bar-l-icon" slot="left">
                <view class="uni-nav-bar-l-icon-left icon">
                    <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
                </view>
            </view>
        </uni-nav-bar>

        <view class="add-box" @click="chooseAdd()">
            <template v-if="addData">
                <view class="name-phone">
                    <view class="name hang1">
                        {{ name_ }}
                    </view>

                    <view>{{ mobile_ }}</view>
                </view>

                <view class="add-text">
                    {{ addData }}
                </view>
            </template>

            <view v-else class="name-phone">
                <view class="name hang1">请选择地址</view>
            </view>

            <view class="right icon">
                <image :src="$img('/static/img2/cc113.png')" lazy-load></image>
            </view>
        </view>

        <view class="goods">
            <view class="goods-hd">
                <view class="pic">
                    <image :src="pageData && pageData.imgurl" lazy-load></image>
                </view>

                <view class="goods-info">
                    <view class="title hang1">
                        {{ (pageData && pageData.title) || '-' }}
                    </view>

                    <view class="sku">规格:{{ (pageData && pageData.sku) || '-' }}</view>

                    <view class="price-num">
                        <view class="price">
                            ¥{{ (pageData && pageData.price) || '0' }}
                        </view>

                        <view class="num">
                            ×{{ (pageData && pageData.buy_num) || '0' }}
                        </view>
                    </view>
                </view>
            </view>

            <!-- <view class="line"></view> -->

            <view v-if="pageData" class="goods-row" @click="$refs.rulePop.getRule(21, '运费说明')">
                <view class="row-l">
                    运费

                    <view class="info icon">
                        <image :src="$img('/static/img2/cc114.png')" lazy-load></image>
                    </view>
                </view>

                <view class="row-r">
                    {{ pageData.yunfei * 1 > 0 ? `¥${pageData.yunfei}` : '免运费' }}
                </view>
            </view>

            <view v-if="totalMoney" class="goods-row">
                <view class="row-l">合计</view>

                <view class="row-r">¥{{ totalMoney.total_price }}</view>
            </view>
        </view>

        <view class="buy-card">
            <view class="buy-title">请选择支付方式</view>

            <!-- <view class="pay-item" @click="togglePay('use_integral_is')">
        <view class="icon">
          <image :src="$img('/static/img2/cc73.png')" lazy-load></image>
        </view>

        <view class="title">
          使用幸运币抵扣¥{{
            (totalMoney && totalMoney.use_integral) || '0'
          }}(剩余:{{ (totalMoney && totalMoney.surplus_integral) || '0' }}个)
        </view>

        <view class="icon">
          <image
            v-if="use_integral_is"
            :src="$img('/static/img2/cc44.png')"
            lazy-load
          ></image>

          <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
        </view>
      </view> -->

            <view class="pay-item" @click="togglePay('use_money_is')">
                <view class="icon">
                    <image :src="$img('/static/img2/cc74.png')" lazy-load></image>
                </view>

                <view class="title">
                    使用余额抵扣¥{{ (totalMoney && totalMoney.use_money) || '0' }}(剩余:{{
            (totalMoney && totalMoney.surplus_money) || '0'
          }})
                </view>

                <view class="icon">
                    <image v-if="use_money_is" :src="$img('/static/img2/cc44.png')" lazy-load></image>

                    <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
                </view>
            </view>
        </view>

        <view class="agree">
            <view class="check icon">
                <image v-if="true" :src="$img('/static/img2/cc44.png')" lazy-load></image>

                <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
            </view>

            我已满18岁，已阅读并同意
            <text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
                《用户协议》
            </text>
        </view>

        <view class="b-fixed c_bg" :style="{
        backgroundImage: `url(${$img('/static/img2/cc78.png')})`
      }" @click="$c.noDouble(submitBuy)">
            确认支付 ¥{{ (totalMoney && totalMoney.price) || '0' }}
        </view>

        <rule-pop ref="rulePop"></rule-pop>
    </view>
</template>

<script>
export default {
    data() {
        return {
            optData: '',
            addData: '',
            pageData: '',
            totalMoney: '',
            canPay: true,
            canPayTimer: null,

            use_money_is: true,
            use_integral_is: true,
            name_: '',
            mobile_: '',
            payWay: 'ali_wap',
            intervalId: null,
        }
    },

    onLoad(options) {
        this.optData = options

        this.getData()
    },
    beforeDestroy() {
        clearInterval(this.intervalId)
    },
    methods: {
        chooseAdd() {
            uni.chooseAddress({
                success: res => {
                    this.name_ = res.userName
                    this.mobile_ = res.telNumber
                    this.addData = `${res.provinceName} ${res.cityName} ${res.countyName} ${res.detailInfo}`
                },
                fail: error => {
                    console.log(error)
                },
                complete: res => { }
            })
        },

        /* 支付方式切换 */
        togglePay(type) {
            this[type] = !this[type]

            this.getData()
        },

        /* 购买 */
        submitBuy() {
            let that = this
            clearInterval(that.intervalId)
            if (!that.canPay) {
                return
            }
            if (!that.addData) {
                that.$c.toast({
                    title: '请选择地址'
                })
                return
            }

            that.canPay = false
            that.canPayTimer = setTimeout(() => {
                clearTimeout(that.canPayTimer)
                that.canPayTimer = null
                that.canPay = true
            }, 3000)

            that.req({
                url: 'product_order_add',
                data: {
                    product_id: that.optData.product_id,
                    address: that.addData,
                    buy_num: that.optData.buy_num,
                    sku_id: that.optData.sku_id,
                    name: that.name_,
                    mobile: that.mobile_,
                    use_money_is: that.use_money_is ? 1 : 0,
                    pay_way: that.payWay,
                    // use_integral_is: this.use_integral_is ? 1 : 0
                },
                success: async res => {
                    clearTimeout(that.canPayTimer)
                    that.canPayTimer = null
                    that.canPay = true
                    if (res.status == 1) {
                        if (res.data.status == 1) {
                            if (that.payWay == 'ali_wap') {
                                uni.showModal({
                                    title: '支付链接,复制到浏览器打开完成支付',
                                    content: res.data.res,
                                    cancelText: '复制',
                                    confirmText: '取消支付',
                                    success: (e) => {
                                        if (e.cancel) {
                                            uni.setClipboardData({
                                                data: res.data.res,
                                                success() {
                                                    uni.showToast({ title: '复制成功' });
                                                    setTimeout(function () {
                                                        that.intervalId = setInterval(() => {
                                                            that.getPrize(res.data.order_num)
                                                        }, 1500)
                                                    }, 2000);
                                                }
                                            });

                                        }

                                    },
                                });
                            } else {
                                const status = await that.$c.wxMpPay({
                                    data: res.data.res
                                })

                                if (status == 'success') {
                                    that.$c.to({
                                        type: 2,
                                        url: '/package/mine/mall-order'
                                    })
                                }
                            }

                        } else {
                            that.$c.toast({
                                title: res.msg,
                                duration: 1000,
                                success: () => {
                                    that.$c.to({
                                        type: 2,
                                        url: '/package/mine/mall-order'
                                    })
                                }
                            })
                        }
                    }
                }
            })
        },
        getPrize(order_num) {
            let that = this
            if (!order_num) {
                return
            }
            setTimeout(() => {
                that.req({
                    url: 'get_order',
                    data: {
                        order_num
                    },
                    Loading: true,
                    success: res => {
                        if (res.status == 1) {


                            if (!res.data.product) {
                                console.log('获取不到商品信息')
                                return
                            }
                            that.$c.to({
                                type: 2,
                                url: '/package/mine/mall-order'
                            })
                            clearInterval(that.intervalId)

                        }
                    }
                })
            }, 500)
        },
        /* 前往选择地址 */
        toAddress() {
            this.inited = false

            this.$c.to({
                url: '/package/mine/dizhi/dizhi',
                query: {
                    type: 'choose'
                },
                events: {
                    chooseAdd: data => {
                        console.log(data)
                        this.addData = data
                    }
                }
            })
        },

        /**
         * @description: 获取数据
         * @return {*}
         */
        getData() {
            this.req({
                url: 'product_order_info',
                data: {
                    product_id: this.optData.product_id,
                    address: this.addData,
                    buy_num: this.optData.buy_num,
                    sku_id: this.optData.sku_id,
                    name: this.name_,
                    mobile: this.mobile_,
                    use_money_is: this.use_money_is ? 1 : 0,
                    // use_integral_is: this.use_integral_is ? 1 : 0
                },
                success: res => {
                    if (res.status == 1) {
                        this.addData = res.data.address
                        this.pageData = res.data.product
                        this.totalMoney = res.data.result
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss">
.content {
    padding: 0 0 150rpx;

    image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }

    .icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .add-box {
        padding: 30rpx;
        width: 690rpx;
        box-sizing: border-box;
        background: #252525;
        border: 2rpx solid #444444;
        position: relative;
        margin: 20rpx auto 0;

        .name-phone {
            display: flex;
            align-items: center;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #ffffff;

            .name {
                max-width: 200rpx;
                margin-right: 20rpx;
            }
            .hang1 {
            }
        }

        .add-text {
            padding: 10rpx 50rpx 0 0;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #ffffff;
        }

        .right {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            top: 50%;
            right: 30rpx;
            transform: translateY(-50%);
        }
        .icon {
        }
    }

    .goods {
        margin: 30rpx auto 0;
        width: 690rpx;
        box-sizing: border-box;
        padding: 30rpx;
        background: #252525;
        border: 2rpx solid #444444;

        .goods-hd {
            display: flex;
            align-items: center;

            .pic {
                width: 160rpx;
                height: 160rpx;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
            }

            .goods-info {
                width: calc(100% - 160rpx);
                box-sizing: border-box;
                padding-left: 20rpx;
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-around;

                .title {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #ffffff;
                }
                .hang1 {
                }

                .sku {
                    padding: 10rpx 0;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #ffffff;
                }

                .price-num {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 6rpx 0 0;

                    .price {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #e40d88;
                    }

                    .num {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #cccccc;
                    }
                }
            }
        }

        .line {
            margin: 30rpx 0 0;
            border-top: 1rpx solid rgba(255, 255, 255, 0.2);
        }

        .goods-row {
            margin: 20rpx 0 0;
            display: flex;
            justify-content: space-between;

            .row-l {
                display: flex;
                align-items: center;

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #ffffff;

                .info {
                    width: 28rpx;
                    height: 28rpx;
                    margin-left: 10rpx;
                }
            }

            .row-r {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #e40d88;
            }
        }
        .goods-row {
            .row-l {
            }
            .row-r {
            }
        }
    }

    .buy-card {
        padding: 30rpx;
        background: #252525;
        border: 2rpx solid #444444;
        width: 690rpx;
        margin: 30rpx auto 0;
        box-sizing: border-box;

        .buy-title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
        }

        .pay-item {
            display: flex;
            align-items: center;
            margin-top: 30rpx;

            .icon {
                width: 40rpx;
                height: 40rpx;
            }

            .title {
                flex: 1;
                padding: 0 14rpx;

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #ffffff;
            }
            .check {
            }
        }
        .pay-item {
            .icon {
            }
            .title {
            }
            .check {
            }
        }
    }

    .agree {
        padding: 30rpx;
        display: flex;
        align-items: center;

        .check {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
        }
        .icon {
        }

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #ffffff;

        text {
            color: #e40d1d;
        }
    }
    .b-fixed {
        width: 690rpx;
        height: 92rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 30rpx;
        bottom: 40rpx;
        z-index: 10;

        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 32rpx;
        color: #ffffff;
        text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
    }
    .c_bg {
    }
}
</style>
